<template>
  <v-card
    class="mx-auto"
    height="900"
    theme=""
    title=""
    width="700"
  >
    <!-- 图片 -->
    <img
      ref="mapImage"
      alt="Map"
      cover
      src="https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/location/locationMap.jpg"
      style="width: 100%; height: 100%; object-fit: cover;"
      @click="handleImageClick"
    />
  </v-card>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import axios from 'axios'; // 引入axios

// 定义一个接口来描述item对象的结构和类型
interface Item {
  name: string; // 确保包含了name属性
  imageUrl: string;
  latitude: number;
  longitude: number;
}


export default defineComponent({
  name: 'MapBodyComponents',
  data() {
    return {
      items: [] as Item[], // 存储地图上的位置
    };
  },
  methods: {
    handleImageClick(event: MouseEvent) {
      // 获取图片元素的引用
      const mapImage = this.$refs.mapImage as HTMLImageElement;
      // 获取图片相对于视口的位置
      const imgRect = mapImage.getBoundingClientRect();
      // 计算鼠标在图片内的相对位置
      const mouseX = (event.clientX - imgRect.left) / (imgRect.right - imgRect.left);
      const mouseY = (event.clientY - imgRect.top) / (imgRect.bottom - imgRect.top);

      // 先移除之前的坐标图片（如果存在）
      const existingCoordinateImage = mapImage.parentNode?.querySelector('.coordinate-image');
      if (existingCoordinateImage) {
        mapImage.parentNode?.removeChild(existingCoordinateImage);
      }

      // 创建一个新的图片元素
      const newImage = document.createElement('img');
      newImage.src = 'https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/icon/locationIcon.png'; // 设置新图片的路径
      newImage.style.position = 'absolute';
      newImage.style.left = (imgRect.right - imgRect.left) * mouseX - 22 + 'px'; // 设置新图片的左侧位置
      newImage.style.top = (imgRect.bottom - imgRect.top) * mouseY - 38 + 'px'; // 设置新图片的顶部位置
      newImage.className = 'coordinate-image'; // 添加一个类名以便识别
      // 将新图片添加到父元素中
      mapImage.parentNode?.appendChild(newImage);
      // 向父元素提交坐标
      this.$emit('updateload', mouseX, mouseY);
    },

    imageClicked(item: Item) {
      // 弹出确认窗口
      const isConfirmed = confirm(`你想要删除 ${item.name}的位置吗？`);

      // 如果用户点击了"确定"
      if (isConfirmed) {
        axios.delete("http://47.113.189.87:8080/animals/deleteLocation", {
          data: {name: item.name},
        }).then(() => {
          // 成功删除后刷新页面
          window.location.reload();
        }).catch(error => {
          console.error('Error:', error);
        });
      }
      // 如果用户点击了"取消", 不执行任何操作
    },
    yourMethodName() {
      // 这里是你想在页面刷新时调用的方法的代码
      axios.get("http://47.113.189.87:8080/animals/getAllLocations").then(response => {
        //console.log(response.data.data)
        const data = response.data.data;

        for (const item of data) {
          const mapImage = this.$refs.mapImage as HTMLImageElement;
          // 获取图片相对于视口的位置
          const imgRect = mapImage.getBoundingClientRect();
          // 创建一个新的图片元素
          const newImage = document.createElement('img');
          newImage.src = item.imageUrl; // 设置新图片的路径
          newImage.style.position = 'absolute';
          newImage.style.width = '30px'; // 限制图片的宽度
          newImage.style.height = '30px'; // 限制图片的高度
          newImage.style.objectFit = 'contain'; // 保持宽高比
          newImage.style.objectFit = 'cover'; // 保持宽高比，填充容器
          newImage.style.borderRadius = '50%'; // 将图片边框设为圆形
          newImage.style.position = 'absolute';
          newImage.style.left = (imgRect.right - imgRect.left) * item.latitude - 22 + 'px'; // 设置新图片的左侧位置
          newImage.style.top = (imgRect.bottom - imgRect.top) * item.longitude - 20 + 'px'; // 设置新图片的顶部位置
          // 为图片添加点击事件监听器
          newImage.addEventListener('click', () => {
            this.imageClicked(item);
          });
          // 将新图片添加到父元素中
          mapImage.parentNode?.appendChild(newImage);
        }
      })
    },
  },
  mounted() {
    this.yourMethodName(); // 页面加载时调用 yourMethodName 方法
  },
});
</script>

<style scoped>
:deep(.v-card) {
  padding: 0 !important;
}

:deep(.v-card-item) {
  padding: 0 !important;
}

.img {
  border-radius: 30px;
}

.v-card {
  border-radius: 25px;
}
</style>
